{extend name='bus@public/index'}
{block name="css"}
<style>
    body{
        background:#ccc;
        width:100%;
        height:100%;
        background:url('/static/img/index_bg.jpg');
    }
    .fluid{
        width:99%;
        height:99%;
        background:skyBlue;
        margin-top:0.3%;
        margin-left:0.5%;
        position:absolute;
        border-radius: 5px;
    }
    .div{
        width:32.3vw;
        margin-left:0.5%;
        margin-top:0.5%;
        background:white;
        height:48vh;
        float:left;
        border-radius:5px;
    }

</style>
{/block}
{block name="main"}

<!--<div class="fluid">-->
<!--    <div class="div" id="echart1"></div>-->
<!--    <div class="div" id="echart2"></div>-->
<!--    <div class="div" id="echart3"></div>-->
<!--    <div class="div" id="echart4"></div>-->
<!--    <div class="div" id="echart5"></div>-->
<!--    <div class="div" id="echart6"></div>-->
<!--</div>-->
{/block}
{block name="script"}
<script>
    let PageConfig  = {};
    let ids = ['echart1','echart3','echart5'];
    for(let k of ids)
    {
        let myChart = echarts.init(document.getElementById(k));
        let option = {
            title:{
                text:k,
                left:'middle'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };
        myChart.setOption(option);

    }

    let idsTwo = ['echart2','echart4','echart6'];
    for(let k of idsTwo)
    {
        let myChart = echarts.init(document.getElementById(k));
        let option = {
            title:{
                text:k,
                left:'middle',

            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false
                }
            },
            color:'skyBlue',
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
            }]
        };
        myChart.setOption(option);

    }


</script>
{/block}



